import React, { Component } from 'react'

export default class App extends Component {
     myref=React.createRef()
    state={
        list:["111","222","333","444","555","666","777","888","999","000"]
    }
    // 
    getSnapshotBeforeUpdate(){
        // 获取容器高度
        console.log(this.myref.current.scrollHeight);
        return this.myref.current.scrollHeight
    }
    componentDidUpdate(prevProps,prevState,value){
        // 现在的高度
        console.log(this.myref.current.scrollHeight);
        // 跳到滚动到之前看的内容
        this.myref.current.scrollTop+=this.myref.current.scrollHeight-value
    }
  render() {
      console.log("render")
    return (
      <div>
        <button onClick={()=>{this.setState({
            list:[...["555","666","777","888","999","000"],...this.state.list]
        })}}>来邮件</button>
        <h1>邮箱应用</h1>
       <div style={{height:'200px',overflow:"auto"}} ref={this.myref}>
       <ul>
            {
                this.state.list.map((item,i)=>
                    <li key={i} style={{height:"100px",background:"pink"}} >{item}</li>
                )
            }
        </ul>
       </div>
      </div>
    )
  }
}
